import React from 'react';
import {connect} from 'react-redux';
import HeadNavComponent from "../../../components/headNav";
import Css from '../../../assets/css/user/mobile/index.css';
import {Toast} from "antd-mobile";
import request from "../../../assets/js/utils/request";
class mobileIndex extends React.Component{
    constructor(){
        super();
        this.state={
            sPhonecode:'',
            bCodeVerification:false,
            sVerification:'获取短信验证码',
            bVerification:'',
        }
        this.timer=null;
        this.bSentCode=true;
        this.sumbit=true
    }
    //输入手机号
    changePhoneCode(e){
        if(this.bSentCode){
            this.setState({sPhonecode:e.target.value},()=>{
                if(this.state.sPhonecode.match(/^1[0-9][0-9]{9}/)){
                    this.setState({bCodeVerification:true})
                }else {
                    this.setState({bCodeVerification:false})
                }
            })
        }
    }
    //输入验证码
    changeVerification(e){
        this.setState({bVerification:e.target.value})
    }
    //点击获取验证码
    async getVerification(){
        this.changeBPhone();
        if(this.bSentCode && this.state.sPhonecode.match(/^1[0-9][0-9]{9}/)){
            //await 解决异步，逻辑是异步数据同步进行，异步还是存在
            let resData=await this.changeBPhone();
            if(resData.code===200){
                if(resData.data.isreg === '1'){
                    Toast.info('你输入的手机号已经注册',2);
                    return false;
                }
            }
            this.bSentCode=false;
            let iTime=10;
            this.setState({sVerification:'重新获取('+iTime+')s',bCodeVerification:false})
            this.timer=setInterval(()=>{
                if (iTime>0){
                    iTime--;
                    this.setState({sVerification:'重新获取('+iTime+')s'})
                }else {
                    clearInterval(this.timer);
                    this.bSentCode=true;
                    this.setState({bCodeVerification:true})
                    this.setState({sVerification:'获取短信验证码'})
                }
            },1000)
        }else if(this.state.sPhonecode.match(/^\s*$/)) {
            Toast.info('请输入手机号',2);
            return false;
        }

    }
    //检测手机是否注册
    changeBPhone(){
        let bUrl= window.base.config.baseUrl+'/home/user/isreg?token='+window.base.config.token;
        return request(bUrl,'post',{username:this.state.sPhonecode}).then((res)=>{
            return res;
        })
    }
    //注册提交
    //async 解决异步，逻辑是异步数据同步进行，异步还是存在
    async Submit(){
        if (this.state.sPhonecode.match(/^\s*$/)) {
            Toast.info('请输入手机号',2);
            return false;
        }
        if (!this.state.sPhonecode.match(/^1[0-9][0-9]{9}/)) {
            Toast.info('请输入正确的手机号',2);
            return false;
        }
        //await 解决异步，逻辑是异步数据同步进行，异步还是存在
        let resData=await this.changeBPhone();
        if(resData.code===200){
            if(resData.data.isreg === '1'){
                Toast.info('你输入的手机号已经注册',2);
                return false;
            }
        }
        if (this.state.bVerification.match(/^\s*$/)) {
            Toast.info('请输入验证码',2);
            return false;
        }
        if (this.sumbit){
            this.sumbit=false;
            let sUrl=window.base.config.baseUrl+'/user/myinfo/updatecellphone?token='+window.base.config.token,
                data={vcode:this.state.bVerification,cellphone:this.state.sPhonecode,uid:this.props.state.redLogin.uid};
            request(sUrl,'post',data).then((res)=>{
                if (res.code===200){
                    Toast.info(res.data,2,()=>{
                        this.props.history.goBack();
                    });
                }else {
                    Toast.info(res.data,2)
                }
            })
        }
    }
    //解决内存泄漏
    componentWillUnmount(){
        clearInterval(this.timer)
        this.setState=(state,callback)=>{
            return ;
        }
    }
    render(){
        return(
            <div className={Css['main']}>
                <HeadNavComponent title={'绑定手机号'} ></HeadNavComponent>
                <div className={Css['grop']+' '+Css['grop_bg_font']}>
                    <i className='warning'></i>新手机号验证成功后，可以绑定成功
                </div>
                <div className={Css['grop']+' '+Css['m50']}>
                    <div className={Css['row']}>
                        <input type='text' placeholder='请输入手机号' onChange={this.changePhoneCode.bind(this)} value={this.state.sPhonecode}/>
                    </div>
                </div>
                <div className={Css['grop']+' '+Css['m50']}>
                    <div className={Css['col_border']+' '+Css['w42']}>
                        <input type='tel' placeholder='请输入验证码' onChange={this.changeVerification.bind(this)} value={this.state.bVerification} ></input>
                    </div>
                    <div className={this.state.bCodeVerification?Css['col_code']+' '+Css['acdive']:Css['col_code']} onClick={this.getVerification.bind(this)}>{this.state.sVerification}</div>
                </div>
                <div className={Css['grop']}>
                    <div className={Css['user_btn']} onClick={this.Submit.bind(this)}>下一步</div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(mobileIndex)
